<template>
  <el-container
    style="display: flex; flex-direction: column; width: 100%; height: 100%"
  >
    <div class="head">
      <img src="../assets/tubiao.png" style="width: 5vw" />
      <span class="font">燕山大学环保应急管理系统</span>
      <el-button
        type="primary"
        :icon="Avatar"
        style="
          position: absolute;
          margin-left: 80vw;
          color: #fff;
          font-weight: bold;
          margin-top: 2.8vw;
          font-size: 1.3vw;
          width: 15vw;
          background-color: #02a7f0;
        "
        @click="drawer = true"
      >
        我的主页
      </el-button>
      
      <el-drawer
        v-model="drawer"
        :title="'欢迎您,管理员' + adminInfo.adminName + '!'"
        :with-header="true"
        style="height: 50vw"
      >
        <div style="margin-left: 3vw">
          <span> 今天是{{ dateWithoutTimezone }} </span>
          <br />
          <div style="height: 1vw"></div>
          <span>当前时间:{{ time }}</span
          ><br />
          <div style="height: 1vw"></div>
          <span>不要偷懒哦，今天也要是努力工作的一天!</span><br />
          <div style="height: 1vw"></div>
        </div>
        <br />
        <el-card style="max-width: 480px; margin-left: 1vw">
          <template #header>
            <div class="card-header" style="margin-left: 7.5vw">
              <span style="font-weight: bold; font-size: 1.8vw"
                >管理员信息</span
              >
            </div>
          </template>
          <p style="font-size: 1.4vw; text-align: center">
            当前管理员账号：{{ adminInfo.adminID }}
          </p>
          <br />
          <p style="font-size: 1.4vw; text-align: center">
            当前管理员姓名：{{ adminInfo.adminName }}
          </p>
          <template #footer
            ><el-button
              type="primary"
              plain
              @click="ShowAndHidden1"
              style="margin-left: 8vw"
              >修改个人信息</el-button
            >
          </template>
        </el-card>

        <div v-if="isShow" style="margin: 1vw 0">
          <el-card style="max-width: 25vw; margin-left: 1vw">
            <div
              style="
                text-align: center;
                font-size: 2vw;
                font-weight: bold;
                margin-bottom: 1vw;
              "
            >
              个人信息修改
            </div>
            <el-form :model="form" label-width="auto" style="max-width: 600px">
              <el-form-item label="当前账户账号:" style="margin-left: -0.7vw">
              <el-input
                v-model="form.adminID"
                style="width: 240px;margin-left: 0.6vw;"
                disabled
                
              />
            </el-form-item>
              <el-form-item label="修改账户姓名:" style="margin-left: -0.7vw">
                <el-input
                  v-model="form.adminName"
                  style="width: 20vw; margin-left: 0.7vw"
                />
              </el-form-item>
              <el-form-item label="修改账户密码：">
                <el-input
                  v-model="form.password"
                  type="password"
                  style="width: 20vw"
                />
              </el-form-item>
              <el-form-item style="margin-left: 5vw">
                <el-button
                  type="primary"
                  @click="onSubmit"
                  style="margin-right: 3vw"
                  >修改</el-button
                >
                <el-button @click="ShowAndHidden2">取消</el-button>
              </el-form-item>
            </el-form>
          </el-card>
        </div>
      </el-drawer>
      <span class="exit">
        <el-button
          type="primary"
          :icon="SwitchButton"
          style="
            position: absolute;
            color: red;
            margin-left: 0.7vw;
            font-weight: bold;
            font-size: 1.3vw;
            width: 9vw;
            background-color: #02a7f0;
          "
          @click="exit"
        >
          -&gt;退出&lt;-
        </el-button>
      </span>
    </div>
    <el-container style="flex: 1">
      <el-aside width="200px" style="background-color: #337ecc">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#337ecc"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          router
        >
          <el-sub-menu index="1">
            <template #title>
              <img src="../assets/register.png" style="width: 20px" />
              <span style="margin-left: 1vw">账户注册</span>
            </template>
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <!-- 一定要为Index在el-menu标签上设置router属性 -->
              <img src="../assets/worker.png" style="width: 20px" />
              <el-menu-item
                index="/IndexA/RegisWorker"
                style="margin-left: -2vw"
                >工作人员注册</el-menu-item
              >
            </div>
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <!-- 一定要为Index在el-menu标签上设置router属性 -->
              <img src="../assets/director.png" style="width: 20px" />
              <el-menu-item
                index="/IndexA/RegisDirector"
                style="margin-left: -2vw"
                >指挥人员注册</el-menu-item
              >
            </div>
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <!-- 一定要为Index在el-menu标签上设置router属性 -->
              <img src="../assets/specialist.png" style="width: 20px" />
              <el-menu-item
                index="/IndexA/RegisSpecialist"
                style="margin-left: -2vw"
                >专家人员注册</el-menu-item
              >
            </div>
          </el-sub-menu>
          <el-menu-item index="/IndexA/userList">
            <img src="../assets/user.png" style="width: 20px" />
            <span style="margin-left: 1vw">用户列表</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
    <el-footer style="background-color: #409eff; flex: 0 0 3vw">
      <div class="footer-box" style="font-size: 10px; text-align: center">
        <div style="height: 0.4vw"></div>
        <span
          >帮助&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;隐私&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;条款</span
        >
        <div style="height: 0.3vw"></div>
        <span>copyright 2024 kalaxiaomi V1.0.1卡拉小米技术出品</span>
      </div>
    </el-footer>
  </el-container>
</template>

<script setup>
import { ref, onMounted, inject } from "vue";
import { format, parseISO } from "date-fns";
import { ElMessage } from "element-plus";
import {useRoute, useRouter} from "vue-router";
import { Avatar, SwitchButton } from "@element-plus/icons-vue";

const router = useRouter()
const route = useRoute()
const admin = ref({});
const adminRes = ref('')
const adminInfo = ref({})
const time = ref("00:00:00");
const value = ref(new Date());
const drawer = ref(false);
let isShow = ref(false);
const axios = inject("axios");
//admin.value = JSON.parse(sessionStorage.getItem("admin"))._value;
const form = ref({
  adminID: route.query.adminID,
  adminName: "",
  password: ""
});
const init = async()=>{
  await axios.post("Admin/getAdminInfo",{
    adminID:route.query.adminID
  }).then((response) => {     
    adminInfo.value = response.data;
    console.log(adminInfo.value)
  }).catch((error) => {
    console.log(error);
  });
}
init();

let ShowAndHidden1 = () => {
  form.value.adminName = adminInfo.value.adminName;
  form.value.password = adminInfo.value.password;
  isShow.value = !isShow.value;
};
let ShowAndHidden2 = () => {
  form.value.adminName = adminInfo.value.adminName;
  form.value.password = adminInfo.value.password;
  isShow.value = !isShow.value;
  ElMessage({
    message: '用户取消修改',
    type: 'error',
    plain: true,
  })
};
const onSubmit = async() => {
 await axios.post("Admin/renewAdminInfo", {
    adminName:form.value.adminName,
    password:form.value.password,
    adminID:form.value.adminID
  }).then((response) => {     
    adminRes.value = response.data;
    console.log(adminRes.value)
    console.log(form.value.adminName)
  console.log(form.value.adminID)
  console.log(form.value.password)
  }).catch((error) => {
    console.log(error);
  });
 
if(adminRes.value == 1){
  ElMessage({
    message: "修改个人信息成功！",
    type: "success",
    plain: true,
  });
}
  else if(adminRes.value == 0){
    ElMessage({
    message: '修改信息失败！',
    type: 'error',
    plain: true,
  })  
  }
  location.reload()
};

const date = parseISO(value.value.toISOString()); // 将 Date 对象转换为 date-fns 兼容的日期对象
const dateWithoutTimezone = ref(format(date, "yyyy年MM月dd日"));
const updateTime = () => {
  const d = new Date();
  const hour = d.getHours() < 10 ? "0" + d.getHours().toString() : d.getHours();
  const minute =
    d.getMinutes() < 10 ? "0" + d.getMinutes().toString() : d.getMinutes();
  const second =
    d.getSeconds() < 10 ? "0" + d.getSeconds().toString() : d.getSeconds();
  time.value = hour + ":" + minute + ":" + second;
};

onMounted(() => {
  const timer = setInterval(updateTime, 1000);
  return () => clearInterval(timer);
});

const exit = ()=>{
  router.push({
    path:'/'
  })
}
</script>

<style scoped>
.head {
  width: 100vw;
  height: 5vw;
  background-color: #02a7f0;
  position: relative;
}
.font {
  font-family: 华文行楷;
  font-size: 2vw;
  position: absolute;
  color: #fff;
  margin-top: 1.5vw;
}

.exit {
  margin-left: 85vw;
  position: absolute;
  text-align: center;
}
</style>